// flex-column
@mixin flex-column($jc: space-around, $ai: center) {
  display: flex;
  flex-direction: column;
  align-items: $ai;
  justify-content: $jc;
}

// flex-column
@mixin flex($jc: space-evenly, $fd: row) {
  display: flex;
  align-items: center;
  justify-content: $jc;
  flex-direction: $fd;
}

.container {
  width: 100vw;
  height: 100vh;
  background-color: #e8dcc3;
  color: #777;
  header {
    width: 100%;
    height: 8vh;
    padding: 0 5vw;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    @include flex(space-between);
    button {
      height: 40px;
      width: 100px;
    }
    .swagger {
      @include flex();
      cursor: pointer;
      img{
        width: 50px;
        height: 50px;
      }
    }
  }
  .main {
    height: 92vh;
    @include flex-column(center);
    .card {
      @include flex-column();
      width: 400px;
      min-height: 400px;
      border-radius: 16px;
      // background-color: #ffffff;
      background-color: #f0eeea;
      .add {
        height: 80px;
        width: 100%;
        @include flex();
        input {
          padding-left: 10px;
          height: 40px;
          width: 60%;
          background-color: #d9e8d8;
          color: #777;
          // border: 1px solid red;
        }
        input:focus {
          border: 1px solid #0075ff;
          box-shadow: 1px 2px 3px black;
        }
        .addbtn1 {
          display: none;
        }
        .addbtn2 {
          display: block;
        }
      }
      .item {
        border-top: 1px solid #d8d8d8;
        padding: 10px 0;
        .todolist {
          li {
            width: 400px;
            height: 35px;
            position: relative;
            // box-sizing: border-box;
            // border-bottom: 1px solid #e6e6e6;
            @include flex(flex-start);
            .toggle {
              position: absolute;
              left: 20px;
              cursor: pointer;
              width: 25px;
              height: 25px;
              border-radius: 15px;
              border: 1px solid red;
            }

            .toggle:checked ~ label {
              color: red;
              //  color: #cc9a9a;
              text-decoration: line-through;
            }

            label {
              position: absolute;
              left: 80px;
              font-size: 15px;
            }
            .delete {
              position: absolute;
              right: 40px;
              width: 0px;
              font-size: 30px;
              color: #cc9a9a;
              transition: color 0.2s ease-out;
            }
          }
          li:hover {
            background-color: #edfaf6;
          }
          li:hover .delete:after {
            content: '×';
          }
        }
      }
      .footer {
        width: 300px;
        @include flex();
        height: 50px;
        color: #777;
        border-top: 1px solid #d8d8d8;
      }
    }
    .tabbar {
      margin-top: 20px;
      width: 400px;
      border-radius: 16px;
      height: 50px;
      // background-color: #fff;
      background-color: #f0eeea;

      @include flex();
      div {
        width: 60px;
        height: 30px;
        color: #fff;
        background-color: #7996a5;
        text-align: center;
        line-height: 30px;
        border-radius: 16px;
        font-size: 15px;
        cursor: pointer;
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .container {
    .main {
      .card {
        width: 80vw;
        .add {
          button {
            width: 60px;
          }
        }
        .item {
          .todolist {
            li {
              width: 80vw;
            }
          }
        }
      }
      .tabbar {
        width: 80vw;
      }
    }
  }
}
